<template>
  <el-drawer v-model="drawerVisible" size="780px" :destroy-on-close="true" @before-close="beforeCloseDrawer">
    <el-form
      ref="ruleFormRef"
      label-width="208px"
      label-suffix=" :"
      :disabled="drawerProps.isView"
      :rules="rules"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="AI昵称" prop="ai_name">
        <el-select v-model="drawerProps.row!.ai_uid" placeholder="请选择">
          <el-option v-for="item in aiUserList" :key="item.ai_uid" :label="item.ai_name" :value="item.ai_uid"> </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="语音电话封面" prop="call_cover_url">
        <UploadImg v-model:image-url="drawerProps.row!.call_cover_url" width="135px" height="135px" :file-size="1">
          <template #empty>
            <el-icon><Avatar /></el-icon>
            <span>请选择上传图片</span>
          </template>
        </UploadImg>
      </el-form-item>

      <el-form-item label="语音电话视频封面" prop="call_video_url">
        <UploadVideo v-model:image-url="drawerProps.row!.call_video_url" height="140px" width="540px" :file-size="10">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传视频文件</span>
          </template>
          <template #tip> 视频大小不能超过 10M </template>
        </UploadVideo>
      </el-form-item>

      <el-form-item label="语音电话描述" prop="call_description">
        <el-input v-model="drawerProps.row!.call_description" type="textarea" :rows="3" placeholder="" clearable></el-input>
      </el-form-item>

      <el-form-item label="语音电话铃声" prop="call_bgm_url">
        <UploadVoice v-model:image-url="drawerProps.row!.call_bgm_url" height="140px" width="540px" :file-size="10">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传音频文件</span>
          </template>
          <template #tip> 音频大小不能超过 10M </template>
        </UploadVoice>
      </el-form-item>

      <el-form-item label="权重" prop="call_weight">
        <el-input v-model="drawerProps.row!.call_weight" placeholder="" type="number" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="CallEditDrawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import UploadImg from "@/components/Upload/Img.vue";
import UploadVoice from "@/components/Upload/voice.vue";
import UploadVideo from "@/components/Upload/video.vue";
import { getPicList } from "@/api/gallery";
import { useRoute } from "vue-router";

const route = useRoute();

// 0:ios(web) 1:android 2:web大尺度 3:web
let ai_platform = 0;
if (route.name === "call2") {
  ai_platform = 1;
} else if (route.name === "call3") {
  ai_platform = 2;
} else if (route.name === "call4") {
  ai_platform = 3;
}

interface DrawerProps {
  row: any;
  isView: boolean;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  row: {},
  isView: false
});

const rules = reactive({
  ai_uid: [{ required: true, trigger: "blur" }],
  call_cover_url: [{ required: false, trigger: "blur" }],
  call_video_url: [{ required: false, trigger: "blur" }],
  call_description: [{ required: false, trigger: "blur" }],
  call_bgm_url: [{ required: false, trigger: "blur" }],
  call_weight: [{ required: true, trigger: "blur" }]
});

const aiUserList = ref();
const init = async () => {
  // @tips：拉一下 ai 人列表。
  const resp: any = await getPicList({ page: 1, pageSize: 1, search: true, ai_platform });
  if (resp.code == 200) {
    aiUserList.value = resp.data;
  }
};
init();

const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

const ruleFormRef = ref<FormInstance>();
const handleSubmit = async () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) {
      return;
    }
    try {
      const params = {
        ...drawerProps.value.row,
        ai_platform
      };
      const res = await drawerProps.value.api!(params);
      if (res.code == "200") {
        ElMessage.success({ message: `提交成功！` });
        drawerProps.value.getTableList!();
        drawerVisible.value = false;
      } else {
        ElMessage.warning({ message: res.msg });
      }
    } catch (e) {
      ElMessage.warning({ message: (e as any).toString() });
    }
  });
};
const beforeCloseDrawer = () => {
  drawerProps.value.isView = false;
  drawerProps.value.row = {};
  drawerVisible.value = false;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped></style>
